<template>
  <div class="major">
    <header>
      <h3>
        <span>{{major.name}}</span>
        <p>{{schoolName}}</p>
      </h3>
      <tabs :data="['简介', '分数线', '评价']" :value="tabsActive" @event="bindTabs"></tabs>
    </header>
    <vue-scroll>
    <section>
      <!-- 简介 -->
      <div class="major-about" v-show="tabsActive===0">
        <dl v-show="data.description||data.schoolingTime||data.degree">
          <dt>简介</dt>
          <dd v-if="data.description">
            <h4>培养目标：</h4>
            <p>{{data.description}}</p>
          </dd>
          <dd v-if="data.schoolingTime">
            <h4>学制：</h4>
            <p>{{data.schoolingTime}}年</p>
          </dd>
          <dd v-if="data.degree">
            <h4>学位授予</h4>
            <p>{{data.degree}}</p>
          </dd>
        </dl>

        <dl v-show="data.knowledge">
          <dt v-if="data.grade">{{data.grade.name==='专科'?'主要职业能力':'获得知识与能力'}}</dt>
          <dd>
            <p>{{data.knowledge}}</p>
          </dd>
        </dl>

        <dl v-show="data.courses">
          <dt v-if="data.grade">{{data.grade.name==='专科'?'核心课程':'主要课程'}}</dt>
          <dd>
            <p>{{data.courses}}</p>
          </dd>
        </dl>

        <dl v-show="data.practical">
          <dt v-if="data.grade">{{data.grade.name==='专科'?'实习实训':'实践教学'}}</dt>
          <dd>
            <p>{{data.practical}}</p>
          </dd>
        </dl>

        <dl v-show="data.grade&&data.grade.name==='专科'&&data.jobQualificationCertificate">
          <dt v-if="data.grade">职业资格证书示例</dt>
          <dd>
            <p>{{data.jobQualificationCertificate}}</p>
          </dd>
        </dl>

        <dl v-show="data.grade&&data.grade.name==='专科'&&data.inheritSecondaryVocational">
          <dt v-if="data.grade">衔接中职专业示例</dt>
          <dd>
            <p>{{data.inheritSecondaryVocational}}</p>
          </dd>
        </dl>

        <dl v-show="data.grade&&data.grade.name==='专科'&&data.inheritUndergraduate">
          <dt v-if="data.grade">接续本科专业示例</dt>
          <dd>
            <p>{{data.inheritUndergraduate}}</p>
          </dd>
        </dl>

        <dl v-show="data.employment">
          <dt v-if="data.grade">{{data.grade.name==='专科'?'就业面向':'就业情况'}}</dt>
          <dd>
            <p>{{data.employment}}</p>
          </dd>
        </dl>

        <no-content v-if="!data.description" style="padding: 50px;" text="暂无内容"></no-content>
      </div>

      <!-- 分数线 -->
      <div v-show="tabsActive===1">
        <div v-if="lineData.length > 0" class="lineDataTable">
          <el-table :data="lineData" border style="width: 100%">
            <el-table-column prop="year" label="年" width="180"> </el-table-column>
            <el-table-column prop="maxScore" label="最高分" width="180"> </el-table-column>
            <el-table-column prop="minScore" label="最低分"> </el-table-column>
            <el-table-column prop="minRank" label="位次"> </el-table-column>
            <el-table-column prop="averageScore" label="平均分"> </el-table-column>
            <el-table-column prop="enrollCount" label="招生人数"> </el-table-column>
            <el-table-column prop="scoreLineDiff" label="线差"> </el-table-column>
          </el-table>
        </div>
        <no-content style="padding: 50px;" v-else text="暂无数据"></no-content>
      </div>

      <!-- 评价 -->
      <div class="major-about" v-show="tabsActive===2">
        <dl v-for="(item,i) in data.evaluate" :key="i">
          <dt>{{item.title}}</dt>
          <dd>
            <p>{{item.content}}</p>
          </dd>
        </dl>
        <no-content style="padding: 50px;" v-if="!data.evaluate" text="暂无数据"></no-content>
      </div>

    </section>
    </vue-scroll>
  </div>
</template>
<script>
import { api } from '@/utils'
import _ from 'lodash'
export default {
  data () {
    return {
      data: '',
      collegeId: '', // 院校ID
      tabsActive: '', // 切换下标
      lineData: '', // 分数线数据
      major: '',
      schoolName: ''
    }
  },
  methods: {
    init (major, name, id) {
      Object.assign(this.$data, this.$options.data())
      this.major = major
      this.schoolName = name
      this.collegeId = id
      this.tabsActive = 0
      this.getData()
    },
    bindTabs (msg) {
      this.tabsActive = msg
      if (msg === 1) {
        this.getLine()
      }
    },
    // 获取简介/评价
    getData () {
      this.$axios.get(api.getMajordetails, { params: {majorId: this.major.id} }).then(data => {
        if (!_.isEmpty(data)) {
          data.major.evaluate = data.major.evaluate ? JSON.parse(data.major.evaluate) : ''
          this.data = data.major
          console.log('data', data)
        }
      })
    },
    // 获取分数线
    getLine () {
      let _params = {
        enrollStudentPlanId: this.major.id
      }
      this.$axios.get(api.filterEnrollMajorScoreLine, { params: _params }).then(data => {
        if (!_.isEmpty(data)) {
          // data.major.evaluate = JSON.parse(data.major.evaluate)
          // this.data = data.major
          console.log('dataxxx', data)
          this.lineData = data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 清除表格默认样式
/deep/ {
  .el-table__header{
    width:100% !important;
    margin: 0 !important;
    border:none !important;
  }
  .el-table tr{
    color:#909399 !important;
    background:#FFF !important;
  }
  .el-table__body{
    margin: 0 !important;
    border: none !important;
  }
  .el-table--border th{
    text-align: center;
  }
  .el-table--border td{
    background: #FFF !important;
    border-top:none !important;
  }
}

.major{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  padding-top: 25px;
  background: #FFF;
  display: flex;
  flex-direction: column;
  header{
    padding: 0 70px;
    h3{
      font-weight:normal;
      padding:15px 0;
      display:flex;
      flex-direction:column;
      span{
        font-size:24px; color:#000;
      }
      p{
        font-size:16px; color:#ADADAD;
      }
    }
  }
  section{
    padding: 20px 70px 40px;
    width: 100%; height: 100%;
    // overflow-y: scroll;
    // 简介
    .major-about{
      >dl{
        >dt{
          position:relative;
          padding-left:15px;
          line-height:28px;
          font-size: 18px; color: #444;
          margin:10px 0;
          &:after{
            position:absolute; left:0px; top:50%;
            transform: translateY(-50%);
            display: block;
            content: " ";
            height:18px; width:4px;
            background:$table-b;
          }
        }
        >dd{
          display:flex;
          flex-direction: column;
          h4{
            font-weight:normal;
            font-size:16px;
            margin:10px 0;
            color:#000;
          }
          p{
            color:#494949;
            font-size:14px;
            line-height:1.6;;
          }
        }
      }
    }
  }
}
</style>
